<template>
  <div>
    <!-- $reouter,forwad需要执行 -->
    <button @click="$router.forward()">前进</button>
    <button @click="$router.back()">后退</button>
    <button @click="$router.go(-2)">后退2</button>
    <h1>HOME</h1>
    <button @click="tomusic">music</button>
    <button @click="towork">work</button>
    <button @click="toplay">play</button>
    <!-- 路由占位符,当前路由的子路由 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    tomusic() {
      // 内部push中有三个参数,后两个分别为成功和失败的回调函数,如果不传入的话,会直接返回promise对象,当重复点击的时候会返回错误的promise
      // 对象,需要进行处理,可以选择使用.catch的方式直接捕获
      // this.$router.push({}).catch(() => {}) // 需要绑定函数,否则会被穿透
      this.$router.push('/home/music')
    },
    towork() {
      // this.$router.push('/home/work')
      this.$router.replace('/home/work', null, () => {}) // 或者直接传入后两个对象,让其不会返回promise对象
    },
    toplay() {
      //参数传入可以是一个配置对象
      this.$router.push({
        // 如果路由配置中写了name别名,也可以直接用别名实现路由编程跳转
        // path: '/home/play',
        name: 'play',
      })
    },
  },
}
</script>

<style></style>
